<template>
  <div style="width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 5">
    <div style="width: 130px;height: 130px;padding:10px;position: fixed;top:calc((100% - 130px) / 2);left:calc((100% - 130px) / 2);">
      <div class="m-load2">
        <div class="line">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "LoadingView",
    introduce:'公共加载中动画',
  }
</script>
<style scoped>
  .m-load,
  .m-load2 {
    width: 36px;
    height: 36px;
  }
  /** 加载动画的静态样式 **/
  .m-load2 {
    position: relative;
    left: calc((100% - 36px) / 2);
    top: 25%;
  }

  .m-load2 .line div {
    position: absolute;
    left: 16px;
    top: 0;
    width: 3px;
    height: 40px;
  }
  .m-load2 .line div:after {
    content: '';
    display: block;
    height: 25%;
    background: #7f7f7f;
    border-radius: 5px;
    left: 0;
    position: absolute;
    z-index: 1;
    width: 3px;
    bottom: 0;
  }

  .m-load2 .line div:before {
    content: '';
    display: block;
    height: 25%;
    background: #7f7f7f;
    border-radius: 5px;
    right: 0;
    position: absolute;
    z-index: 1;
    width: 3px;
    top: 0;
  }

  .m-load2 .line div:nth-child(2) {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
  }

  .m-load2 .line div:nth-child(3) {
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
  }

  .m-load2 .line div:nth-child(4) {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }

  .m-load2 .line div:nth-child(5) {
    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
  }

  .m-load2 .line div:nth-child(6) {
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
  }

  .m-load2 .circlebg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    /* background: transparent; */
    border-radius: 18px;
  }

  /** 加载动画 **/
  @-webkit-keyframes load {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .m-load2 .line div:nth-child(1):before {
    animation: load 1.2s linear 0s infinite;
    -webkit-animation: load 1.2s linear 0s infinite;
  }

  .m-load2 .line div:nth-child(2):before {
    animation: load 1.2s linear 0.1s infinite;
    -webkit-animation: load 1.2s linear 0.1s infinite;
  }

  .m-load2 .line div:nth-child(3):before {
    animation: load 1.2s linear 0.2s infinite;
    -webkit-animation: load 1.2s linear 0.2s infinite;
  }

  .m-load2 .line div:nth-child(4):before {
    animation: load 1.2s linear 0.3s infinite;
    -webkit-animation: load 1.2s linear 0.3s infinite;
  }

  .m-load2 .line div:nth-child(5):before {
    animation: load 1.2s linear 0.4s infinite;
    -webkit-animation: load 1.2s linear 0.4s infinite;
  }

  .m-load2 .line div:nth-child(6):before {
    animation: load 1.2s linear 0.5s infinite;
    -webkit-animation: load 1.2s linear 0.5s infinite;
  }

  .m-load2 .line div:nth-child(1):after {
    animation: load 1.2s linear 0.6s infinite;
    -webkit-animation: load 1.2s linear 0.6s infinite;
  }

  .m-load2 .line div:nth-child(2):after {
    animation: load 1.2s linear 0.7s infinite;
    -webkit-animation: load 1.2s linear 0.7s infinite;
  }

  .m-load2 .line div:nth-child(3):after {
    animation: load 1.2s linear 0.8s infinite;
    -webkit-animation: load 1.2s linear 0.8s infinite;
  }

  .m-load2 .line div:nth-child(4):after {
    animation: load 1.2s linear 0.9s infinite;
    -webkit-animation: load 1.2s linear 0.9s infinite;
  }

  .m-load2 .line div:nth-child(5):after {
    animation: load 1.2s linear 1s infinite;
    -webkit-animation: load 1.2s linear 1s infinite;

  }

  .m-load2 .line div:nth-child(6):after {
    animation: load 1.2s linear 1.1s infinite;
    -webkit-animation: load 1.2s linear 1.1s infinite;
  }
</style>
